<template>
  <div>
    <el-form ref="form" class="form" size="small" label-width="80px">
         <el-form-item label="学科">
          <el-select @change="checkSubject" placeholder="请选择" v-model="checkedObj.subjectID">
           <el-option v-for="item in subject" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
         </el-form-item>
          <el-form-item label="二级目录">
          <el-select placeholder="请选择" v-model="checkedObj.catalogID">
           <el-option v-for="item in catas" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
         </el-form-item>
        <el-form-item label="标签">
          <el-select placeholder="请选择" v-model="checkedObj.tags">
           <el-option v-for="item in tags" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
         </el-form-item>
        <el-form-item label="关键词">
          <el-input placeholder="根据题干搜索" v-model="checkedObj.keyword"></el-input>
         </el-form-item>
          <el-form-item label="试题类型">
          <el-select  placeholder="请选择" v-model="checkedObj.questionType">
           <el-option v-for="item in questionType" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
         </el-form-item>
          <el-form-item label="难度">
          <el-select placeholder="请选择" v-model="checkedObj.difficulty">
           <el-option v-for="item in difficultyArray" :key="item.value" :value="item.value.toString()" :label="item.label"></el-option>
          </el-select>
         </el-form-item>
        <el-form-item label="方向">
          <el-select placeholder="请选择" v-model="checkedObj.direction">
           <el-option v-for="item in directive" :key="item" :value="item"></el-option>
          </el-select>
         </el-form-item>
        <el-form-item label="录入人">
          <el-select placeholder="请选择" v-model="checkedObj.creatorID">
           <el-option v-for="item in userArray" :key="item.id" :value="item.id" :label="item.username"></el-option>
          </el-select>
         </el-form-item>
          <el-form-item label="题目备注">
           <el-input v-model="checkedObj.remarks"></el-input>
         </el-form-item>
          <el-form-item label="企业简称">
           <el-input v-model="checkedObj.shortName"></el-input>
         </el-form-item>
        <el-form-item class="addressSelect" label="城市">
          <el-select  placeholder="请选择" @change="changeProvince" v-model="checkedObj.province">
           <el-option v-for="item in provinces" :key="item"  :value="item"></el-option>
          </el-select>
          <el-select  placeholder="请选择" v-model="checkedObj.city">
            <el-option v-for="item in citys" :key="item"  :value="item"></el-option>
          </el-select>
         </el-form-item>
        <div class="rightBtn">
          <el-button size="small" @click="clearForm">清除</el-button>
          <el-button size="small" @click="searchQuestions" type="primary">搜索</el-button>
        </div>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { direction, difficulty, questionType } from '@/api/hmmm/constants.js'
import { simple as userSimple } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { simple as Simpledirectorys } from '@/api/hmmm/directorys.js'
export default {
  data () {
    return {
      subject: [],
      difficultyArray: difficulty,
      questionType,
      directive: direction,
      userArray: [],
      provinces: provinces(),
      citys: [],
      tags: [],
      catas: [],
      checkedObj: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    }
  },
  methods: {
    async getSelectOptions () {
      // 获取所有的学科列表
      const res = await simple()
      this.subject = res.data
      // 获取所有的员工
      const { data } = await userSimple()
      this.userArray = data
    },
    // 清除按钮
    clearForm () {
      this.checkedObj = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    },
    // 当学科下拉框选出学科时触发-->发请求获取标签列表和目录列表
    async checkSubject () {
      // 获取标签列表
      const res = await tagsSimple({ subjectID: this.checkedObj.subjectID })
      this.tags = res.data
      // 获取目录列表
      const { data } = await Simpledirectorys({ subjectID: this.checkedObj.subjectID })
      this.catas = data
    },
    // 改变城市时触发函数使城市下辖的地区渲染
    changeProvince () {
      this.citys = citys(this.checkedObj.province)
    },
    // 搜索按钮点击触发
    searchQuestions () {
      this.$emit('searchQuestions', { ...this.checkedObj })
    }
  },
  created () {
    this.getSelectOptions()
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep{
    .addressSelect{
     .el-form-item__content{
         display: flex;
         .el-select{
           margin-right:5px ;
         }
         }
       }}
.form{
  display: flex;
  flex-wrap: wrap;
  .el-form-item{
    width: 25%;
    .el-select.el-select--small{
        width: 100%;
    }
  }
  .rightBtn{
    width: 25%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
}
</style>
